<!--
 * @description  : 市管-添加特殊区域
 * @descriptionDetail: 市管-添加特殊区域
 * @copyright    : 浙江烟草
 * @author       : sy
 * @create       : 2022-09-26 15:57:44
-->
<template>
	<view class="page">
		<!-- #ifdef H5-ONLY -->
		<theme-navbar :is-white="false" :title="navTitle" :custom-back="goBack" style="z-index: 99999">
			<view class="nav-right-icon">
				<span>
					<u-icon name="plus" color="#FFF" @tap="handlerAdd"></u-icon>
				</span>
				<span>
					<u-icon color="#FFF" name="more-dot-fill" size="38" @tap="selectCondit"></u-icon>
				</span>
			</view>
		</theme-navbar>
		<!-- #endif -->

		<!-- #ifdef H5-DINGDING || H5-WECHAT || H5-EMP -->
		<fab-button :content="fContent" @fabtrigger="fabtrigger" />
		<!-- #endif -->
		<me-table :i="0" :top="10" :index="0" :load-data="loadData" ref="mescrollItem0">
			<template #default="d">
				<view class="card">
					<u-row @tap="handlerSelectItem(d.data)">
						<u-col span="10">
							<areas-item :isClick="false" :client="d.data"></areas-item>
						</u-col>
						<u-col span="2" style="text-align:right;">
							<u-icon name="checkbox-mark" :color="$theme.u_type_primary" size="38" style="margin-right: 10px;" v-if="selectedUids.includes(d.data.areaUuid)"></u-icon>
						</u-col>
					</u-row>
				</view>
			</template>
		</me-table>
		<!-- 底部按钮开始 -->
		<view class="submit-btns btn-other-cls">
			<u-button class="u-btn" type="primary" @click="handlerSure">
				确定
			</u-button>
		</view>
		<u-popup v-model="queryShow" width="80%" mode="right">
			<special-areas-search ref="sasRef" @choiceOrg="orgChoice" @selectChange="selectChange"></special-areas-search>
		</u-popup>
		<!-- 组织机构选择 -->
		<u-popup mode="bottom" height="80%" v-model="orgSelectShow">
			<org-select :cleanParentOrg="true" :isHybrid="true" limitNodeType="all" treeType="zm-all" @choose="handlerChooseOrg"></org-select>
		</u-popup>
		<u-popup :mask-close-able="false" v-model="typeShow" border-radius="20" mode="center" width="80%" height="410rpx">
			<view class="good-popup-lay">
				<view class="good-popup-lay__title">
					类型选择
				</view>
				<view style="margin: 32rpx 0;">
					<u-form-item label-width="150" label="是否12313:" label-position="left">
						<u-switch v-model="isReportHotline"></u-switch>
					</u-form-item>
					<u-form-item label-width="150" v-show="isReportHotline" label="受理单号:" label-position="left">
						<u-input v-model="applyCode" placeholder="请输入" :needValid="true"></u-input>
					</u-form-item>
				</view>
				<view class="good-popup-lay__btns">
					<u-button plain type="primary" size="medium" @click="closeSpecialType">
						取&nbsp;&nbsp;&nbsp;&nbsp;消
					</u-button>
					<u-button type="primary" size="medium" @click="saveSpecialType">
						保&nbsp;&nbsp;&nbsp;&nbsp;存
					</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import MeTable from '@/components/me-table.vue';
	import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
	import checkService from "@/service/check/check.service";
	import AreasItem from './components/areas-item.vue';
	import SpecialAreasSearch from './components/specialAreasSearch.vue';
	import OrgSelect from "@/components/org-select.vue";
	import fabButton from '@/components/uni-fab.vue';
	export default {
		components: {
			MeTable,
			AreasItem,
			SpecialAreasSearch,
			OrgSelect,
			fabButton
		},
		mixins: [MescrollMoreMixin, ],
		data() {
			return {
				isSingle: false, // 是否单选，默认多选
				isSupple: false, // 判断是否为货物来源
				selectedUids: [], // 选中项的ids
				selectedItems: [], // 选中项
				planList: [],
				newList: [],
				searchObj: {}, // 返回过来查询对象
				queryShow: false,
				orgSelectShow: false,
				isReportHotline: false,
				typeShow: false,
				applyCode: "",
				fContent: [{
						iconPath: require("@/static/add.png"),
						selectedIconPath: require("@/static/add.png"),
						text: '添加',
						active: false,
					},
					{
						iconPath: require("@/static/sou.png"),
						selectedIconPath: require("@/static/sou.png"),
						text: '筛选',
						active: false,
					},
				],
			};
		},
		onLoad(option) {
			this.isSingle = option.isSingle;
			if (option.isSupple) {
				this.isSupple = true;
			}
			let opt = this.getRouteParam();
			this.planList = this.$u.test.array(opt) ? opt : [];
			// console.log(this.planList)
		},
		methods: {
			setRightBtns() {
				// 设置右侧标题
				// #ifdef H5-DINGDING
				this.$deviceApi.setMenu([{
					"id": "1",
					"text": "添加",
				}, {
					"id": "2",
					"text": "筛选",
				}, ], (res) => {
					if (res.id == '1') { // 添加
						this.handlerAdd();
					} else { // 筛选
						this.selectCondit();
					}
				});
				// #endif
			},
			fabtrigger(act) {
				console.log('act', act)
				if (act.index === 0) {
					this.handlerAdd()
				} else if (act.index === 1) {
					this.selectCondit()
				}
			},
			// 右侧查询条件
			selectCondit() {
				this.queryShow = true;
				this.setRouteParam(this.searchObj);
			},
			// 查询条件回调
			selectChange(e) {
				this.queryShow = false;
				this.searchObj = e;
				this.handlerSearch();
			},
			handlerSearch() {
				this.$refs['mescrollItem0'].refresh();
			},
			// 添加
			handlerAdd() {
				this.$u.route('/pages/check/addSpecialAreas');
			},
			updateBackState(param) {
				if (param.refresh) {
					this.handlerSearch();
				}
			},
			orgChoice() {
				this.orgSelectShow = true;
			},
			closeSpecialType() {
				this.typeShow = false;
				this.isReportHotline = false;
				this.applyCode = ''
			},
			saveSpecialType() {
				if (this.isReportHotline && this.$u.test.isEmpty(this.applyCode)) return this.$u.toast('请输入受理单号')
				if (!this.isReportHotline) {
					this.applyCode = ''
				}
				this.selectedItems.filter(item => {
					let obj = item;
					this.$set(obj, 'isReportHotline', this.isReportHotline)
					this.$set(obj, 'applyCode', this.applyCode)
					obj.isReportHotline = obj.isReportHotline ? 1 : 0;
					return obj;
				})
				this.backPrev({
					paramKey: 'specialAreasTask',
					param: this.selectedItems,
				});
				this.selectedUids = this.selectedItems = [];
				this.typeShow = false;
			},
			// 组织单位回调事件
			handlerChooseOrg(orgs) {
				this.$refs.sasRef.queryForm.orgUuid = orgs[0].id;
				this.$refs.sasRef.queryForm.orgName = orgs[0].name;
				this.$refs.sasRef.orgName = orgs[0].name;
				this.orgSelectShow = false;
			},
			// 选中
			handlerSelectItem(item) {
				if (this.isSingle) {
					this.selectedUids = [item.areaUuid, ];
					this.selectedItems = [item, ];
					return;
				}
				if (this.selectedUids.includes(item.areaUuid)) {
					this.selectedItems = this.selectedItems.filter(it => it.areaUuid != item.areaUuid);
				} else {
					this.selectedItems.push(item);
				}
				this.selectedUids = [];
				this.selectedItems.forEach(it => this.selectedUids.push(it.areaUuid));
			},
			// 特殊区域列表查询数据
			loadData(page) {
				// 调用后台接口查询数据：分页参数page.size, page.num
				return checkService.findAreaListPage({
					page: page.num,
					limit: page.size,
					isActive: 1,
					...this.searchObj,
				});
			},
			// 确定
			handlerSure() {
				let self = this;
				// 零售户添加
				if (this.selectedItems.length == 0) {
					this.$u.toast("请选择特殊区域");
					return;
				}
				this.planList.forEach(item => {
					self.newList.push(item.areaUuid)
				})
				let idList = self.selectedItems.filter(r => {
					return self.newList.includes(r.areaUuid)
				})
				if (idList.length > 0) {
					this.$u.hideLoading();
					this.selectedItems.filter(item => {
						if (item.areaUuid == idList[0].areaUuid) {
							this.$u.toast(`【${item.areaName}】已存在`);
						}
					})
					return
				}
				this.typeShow = true;
			},

		},
	};
</script>

<style lang="scss" scoped>
	.page {
		padding: 0;
	}

	.sticky-header {
		background-color: #fff;
		position: fixed;
		/* #ifdef H5-DINGDING  */
		top: 0px;
		/* #endif */
		/* #ifndef H5-DINGDING  */
		top: 44px;
		/* #endif */
		width: 100%;
		height: 40px;
		z-index: 999;
	}

	.good-popup-lay {
		padding: $cm-content-paddng-row;
		width: 100%;
		height: 100%;

		&__title {
			font-size: 36rpx;
			font-weight: 600;
			color: $u-main-color;
			margin: 10rpx 0;
			text-align: center;
			width: 100%;
		}

		&__btns {
			width: 100%;
			margin-top: 24rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			uni-button {
				flex: 0.28;
			}
		}
	}
</style>
